import React, { FC } from "react";
import { Typography } from "antd";
import { nanoid } from "nanoid";

import { addComponent } from "../../../store/componentReducer/index";
import { componentConfGroup, ComponentConfigType } from "../../../components/QuestionComponents";
import styles from "./ComponentLib.module.scss";
import { useDispatch } from "react-redux";
const { Title } = Typography;
const Lib: FC = () => {
  const dispatch = useDispatch();
  function getComponent(c: ComponentConfigType, index) {
    const { title, type, Component, defaultProps } = c;

    function handleClick() {
      dispatch(
        addComponent({
          fe_id: nanoid(),
          title,
          type,
          props: defaultProps,
        })
      );
    }
    return (
      <div className={styles.wrapper} key={type} onClick={handleClick}>
        <div className={styles.component}>
          <Component></Component>
        </div>
      </div>
    );
  }

  return (
    <div>
      {componentConfGroup.map((group, index) => (
        <div key={group.groupId}>
          <Title level={3} style={{ fontSize: "16px", marginTop: index > 0 ? "20px" : 0 }}>
            {group.groupName}
          </Title>
          <div>{group.components.map((item, index) => getComponent(item, index))}</div>
        </div>
      ))}
    </div>
  );
};

export default Lib;
